<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据表格</title>
    <link rel="stylesheet" href="./res/bootstrap-4.5.0-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./res/font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="./res/jquery-3.5.1.min.js"></script>
    <script src="./res/popper.min.js"></script>
    <script src="./res/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
    <script src="./res/layer/layer.js"></script>
    <script src="./res/kgcutils.js"></script>

</head>

<body>
    <button type="button" class="btn btn-primary" id="btn_add"><i class="fa fa-plus-square" aria-hidden="true"></i>&nbsp;添加
    </button> &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-primary" id="btn_del"><i class="fa fa-trash" aria-hidden="true"></i>&nbsp;删除
    </button> &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-primary" id="btn_edit"><i class="fa fa-pencil-square" aria-hidden="true"></i>&nbsp;修改
    </button> &nbsp;&nbsp;&nbsp;&nbsp;
    <button type="button" class="btn btn-primary" id="btn_info"><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;查看
    </button>
    <table class="table table-hover table-bordered">
        <thead class="thead-light">
            <tr align="center">
                <th><input type="checkbox" id="isAll"></th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <tbody id="data_items"></tbody>
    </table>
    <!-- 新增员工模态框 -->
    <div id="addModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                </div>
                <div class="modal-title">
                    <h1 class="text-center">员工信息</h1>
                </div>
                <div class="modal-body">
                    <form class="form-group" action="">
                        <div class="form-group">
                            <label for="nickname">姓名</label>
                            <input class="form-control form-add" id="nickname" type="text" placeholder="" name="name" value="" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="idCard">身份证</label>
                            <input class="form-control form-add" id="idCard" type="text" placeholder="" name="idCard" value="" autocomplete="off">
                        </div>
                        <div class="text-right">
                            <button class="btn btn-primary" id="add_submit" type="submit">提交</button>
                            <button class="btn btn-danger" data-dismiss="modal" id="add_cancle">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- 员工信息模态框 -->
    <div id="infoModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                </div>
                <div class="modal-title">
                    <h1 class="text-center">员工信息</h1>
                </div>
                <div class="modal-body">
                    <form class="form-group" action="">
                        <div class="form-group">
                            <label for="nickname">姓名</label>
                            <input class="form-control form-edit" id="info_nickname" readonly type="text" placeholder="" name="name" value="" autocomplete="off">
                        </div>
                        <div class="form-group">
                            <label for="idCard">身份证</label>
                            <input class="form-control form-edit" id="info_idCard" readonly type="text" placeholder="" name="idCard" value="" autocomplete="off">
                        </div>
                        <div class="text-right">
                            <button class="btn btn-danger" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./res/init.js"></script>
<script src="./res/table.js"></script>